<template>
    <div class="container">
        <div class="operation-content">
            <div>
                <el-page-header @back="closeWindow" content="营收梳理维护" />
            </div>
            <div>
                <el-button v-if="form.yearSplitState == 1" type="warning" @click="addYearAlloc">添加年度分解</el-button>
                <el-button v-show="showSave" type="primary" @click="onSubmit">保存</el-button>
                <el-button v-show="showSub" type="primary" @click="onSubmit">提交</el-button>
            </div>
        </div>
        <div class="form-content">
            <table class="table-class" border="0" cellspacing="0" cellpadding="0">
                <tr class="tr-class">
                    <td class="td-class label-class">项目名称</td>
                    <td class="td-class content-class" colspan="3">
                        <el-input v-model="form.projectName" class="form-input-class" disabled />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目编码</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.projectCode" class="form-input-class" disabled />
                    </td>
                    <td class="td-class label-class">所属部门</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.departmentName" class="form-input-class" disabled />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">合同净额（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.contractAmount" class="form-input-class" placeholder="请输入合同净额（元）" :disabled="disabled" />
                    </td>
                    <td class="td-class label-class">分包合同额（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.subContractAmount" class="form-input-class" placeholder="请输入分包合同额（元）" :disabled="disabled" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">项目初始进度（%）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.initProgress" class="form-input-class" placeholder="请输入项目初始进度" />
                    </td>
                    <td class="td-class label-class">更新实际进度（%）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.progress" class="form-input-class" placeholder="请输入项目初始进度" />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">总营收（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.revenue" class="form-input-class" placeholder="自动计算" disabled />
                    </td>
                    <td class="td-class label-class">总分包营收（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.subRevenue" class="form-input-class" placeholder="自动计算" disabled />
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">总净营收（元）</td>
                    <td class="td-class content-class">
                        <el-input v-model="form.netRevenue" class="form-input-class" placeholder="自动计算" disabled />
                    </td>
                    <td class="td-class label-class"></td>
                    <td class="td-class content-class">
                    </td>
                </tr>
                <tr class="tr-class">
                    <td class="td-class label-class">年度分解</td>
                    <td class="td-class td-grid-content" colspan="3">
                        <el-table ref="datagrid" :data="form.alloc" height="300">
                            <el-table-column type="index" width="80" label="序号" />
                            <el-table-column label="年度">
                                <template #default="scope">
                                    <el-date-picker v-model="scope.row.year" type="year" value-format="YYYY" class="table-input-class" placeholder="选择日期" />
                                </template>
                            </el-table-column>
                            <el-table-column label="分配比（%）">
                                <template #default="scope">
                                    <el-input v-model="scope.row.rate" class="table-input-class" placeholder="请输入" />
                                </template>
                            </el-table-column>
                            <el-table-column label="分解量">
                                <template #default="scope">
                                    <el-input v-model="scope.row.count" class="table-input-class" placeholder="请输入" />
                                </template>
                            </el-table-column>
                        </el-table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import http from '@/http.js'
import optionUtil from '@/utils/option.js'
import formatUtil from '@/utils/format.js'

export default {
    props: {
        projectId: {
            type: String,
            default: ''
        },
        operation: {
            type: String,
            default: 'view'
        }
    },
    components: {},
    emits: ['close'],
    setup(props, ctx) {
        const processRef = ref(null);

        const state = reactive({
            form: {
                id: '',
                projectId: '',
                contractAmount: '',
                subContractAmount: '',
                initProgress: '',
                progress: '',
                revenue: '',
                subRevenue: '',
                netRevenue: '',
                alloc: [],
                progressUpdateState: 0,
                yearSplitState: 0
            },
            showSave: false,
            showSub: false,
            disabled: true
        })

        const closeWindow = () => {
            ctx.emit("close");
        }

        const init = () => {
            if (props.operation == 'edit') {
                state.showSave = true;
                state.showSub = false;
                state.disabled = false;
            }
            if (props.operation == 'fill') {
                state.showSave = false;
                state.showSub = true;
                state.disabled = false;
            }
            console.log(state.allowEdit)
            if (props.projectId != '') {
                loadDetail();
            }
        }

        const loadDetail = () => {
            http.fetchForm({
                url: '/jixiao/revenue/findByProjectId',
                method: 'get',
                data: {
                    projectId: props.projectId
                }
            }).then((res) => {
                console.log(res);
                let data = res.data;
                if (data.contractAmount == null) {
                    data.contractAmount = data.projectContractAmount;
                }
                if (data.subContractAmount == null) {
                    data.subContractAmount = data.projectSubContractAmount == null ? 0 : data.projectSubContractAmount;
                }

                data['contractAmount'] = data.contractAmount / 100;
                data['subContractAmount'] = data.subContractAmount / 100;
                data['revenue'] = data.revenue / 100;
                data['subRevenue'] = data.subRevenue / 100;
                data['netRevenue'] = data.netRevenue / 100;
                state.form = data;
            });
        }


        const onSubmit = () => {
            let params = JSON.parse(JSON.stringify(state.form));
            if (params.contractAmount == '') {
                ElNotification({
                    title: '提示',
                    message: "合同净额不能为空",
                    type: 'info'
                });
                return;
            }
            if (params.initProgress == '') {
                ElNotification({
                    title: '提示',
                    message: "项目初始进度不能为空",
                    type: 'info'
                });
                return;
            }
            if (params.progress == '' || params.progress == null) {
                params['progress'] = params.initProgress;
            }
            params['contractAmount'] = params.contractAmount == '' ? 0 : params.contractAmount * 100;
            params['subContractAmount'] = params.subContractAmount == '' ? 0 : params.subContractAmount * 100;
            params['revenue'] = params.contractAmount * (100 - params.progress) / 100;
            params['subRevenue'] = params.subContractAmount * (100 - params.progress) / 100;
            params['netRevenue'] = (params.contractAmount - params.subContractAmount) * (100 - params.progress) / 100;

            http.fetchJson({
                url: '/jixiao/revenue/save',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: "保存成功",
                    type: 'success'
                });
                closeWindow();
            });
        }

        const addYearAlloc = () => {
            let list = state.form.alloc;
            let newData = {
                id: '',
                year: '',
                rate: '',
                count: ''
            }
            list.push(newData);
            state.form.alloc = list;
        }

        onMounted(() => {
            init();
        });

        return {
            formatUtil,
            ...toRefs(state),
            closeWindow,
            onSubmit,
            addYearAlloc
        }
    }
}
</script>
<style scoped>
.container {
    width: 100%;
    height: 100%;
}

.operation-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 50px;
    border-bottom: 1px solid #eee;
}

.form-content {
    width: 100%;
    height: calc(100% - 69px);
    padding: 20px 50px;
    overflow: auto;
    overflow-x: hidden;
}

:deep(.el-page-header) {
    line-height: 28px;
}

:deep(.el-page-header__content) {
    font-size: 16px;
}

.table-class {
    width: 100%;
    border: 1px solid #eee;
}

.table-class .tr-class {}

.table-class .tr-class .td-class {
    font-size: 12px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.table-class .tr-class .td-class:last-child {
    border-right: none;
}

.table-class .tr-class:last-child .td-class {
    border-bottom: none;
}

.label-class {
    padding: 0 10px;
    width: 15%;
    height: 40px;
    line-height: 40px;
    color: #657180;
    font-weight: normal;
}

.content-class {
    padding: 0;
    width: 35%;
    height: 40px;
}

:deep(.el-input__inner) {
    border: none;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0;
}

:deep(.el-textarea__inner) {
    border: none;
    font-size: 12px;
    font-weight: bold;
    border-radius: 0;
}

/*:deep(.el-table .el-input__inner) {
    padding: 0;
}*/

.form-input-class {
    width: 100%;
}

.td-grid-content {
    height: 300px;
    border-bottom: none !important;
}

.dialog-content {
    padding: 0;
}

.table-input-class {
    width: 100%;
}

.btn-content {
    padding: 10px;
    text-align: right;
}
</style>